<template>
  <form-item-wrapper
    :designer="designer"
    :field="field"
    :rules="rules"
    :design-state="designState"
    :parent-widget="parentWidget"
    :parent-list="parentList"
    :index-of-parent-list="indexOfParentList"
    :sub-form-row-index="subFormRowIndex"
    :sub-form-col-index="subFormColIndex"
    :sub-form-row-id="subFormRowId"
  >
    <template v-if="!field.options.hiddenField">
      <span v-if="isReadMode" class="readonly-mode-field" style="word-break: break-all">{{ displayText }}</span>
      <el-input
        v-else
        ref="fieldEditor"
        v-model.trim="fieldModel"
        :disabled="field.options.disabled"
        :readonly="field.options.readonly"
        :size="field.options.size"
        :title="fieldModel || ''"
        class="hide-spin-button"
        :type="inputType"
        :style="{ 'font-size': `${field.options.fontSize}px`, 'font-family': `${field.options.fontFamily}` }"
        :show-password="field.options.showPassword"
        :placeholder="field.options.placeholder"
        :clearable="field.options.clearable"
        :minlength="field.options.minLength"
        :maxlength="field.options.maxLength"
        :show-word-limit="field.options.showWordLimit"
        @focus="handleFocusCustomEvent"
        @blur="handleBlurCustomEvent"
        @input="handleInputCustomEvent"
        @change="handleChangeEvent"
      >
        <template #prefix  >
          <component style="width: 15px; height: 15px" :is="field.options.prefixIcon" />
        </template>
        <template #suffix v-if="field.options.suffixIcon">
          <component style="width: 15px; height: 15px" :is="field.options.suffixIcon" />
        </template>
        <template #append v-if="field.options.appendButton">
          <el-button :disabled="field.options.disabled || field.options.appendButtonDisabled" @click="emitAppendButtonClick">
            <el-icon>
              <component :is="field.options.buttonIcon" />
            </el-icon>
          </el-button>
        </template>
      </el-input>
    </template>
  </form-item-wrapper>
</template>
<script>
import formDesigner from '@common/form-designer';

const FormItemWrapper = formDesigner.getExportResource('src/form-designer/extension/form-designer/rewrite-field-widget/input-widget-rewrite.vue');
const OriginInput = formDesigner.getExportResource('src/form-designer/components/form-designer/form-widget/field-widget/input-widget.vue');

const { deepClone } = formDesigner.getExportResource('src/form-designer/utils/util.js')


export default {
  components: {
    FormItemWrapper: FormItemWrapper.default
  },
  extends: OriginInput.default,
  mounted() {
    if (this.$refs.fieldEditor && this.$refs.fieldEditor.input) {
      this.$refs.fieldEditor.input.style.fontFamily = this.field.options.fontFamily;
      this.$refs.fieldEditor.input.style.textAlign = this.field.options.contentAlign;
    }
    this.setInitDisplayText(deepClone(this.displayText));
    console.log(this, this.$el, this.$options);
  }
};
</script>
